﻿<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    @Scripts.Render("~/Resource/js/fe.head.js")
</head>

<body>
    <div id="app" v-cloak>
        <div class="edit_pagecontainer">
            <div class="edit_formcontainer">
                <el-form ref="form" :model="form" :label-width="labelWidth" :rules="rules">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="姓名" prop="DisplayName">
                                <el-input v-model="form.DisplayName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="登录名" prop="LoginID">
                                <el-input v-model="form.LoginID"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="父级部门">
                                <common-tree :tree-data="treeData" tree-Model="single" :tree-select-value="form.OUGuid" v-on:node-select-change="nodeChange"
                                    :tree-body-width="630">
                                </common-tree>
                            </el-form-item>
                        </el-col>

                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="状态">
                                <el-radio v-model="form.IsEnable" :label="1">启用</el-radio>
                                <el-radio v-model="form.IsEnable" :label="0">禁用</el-radio>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="性别">
                                <el-radio v-model="form.Sex" :label="1">男</el-radio>
                                <el-radio v-model="form.Sex" :label="0">女</el-radio>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="固定电话">
                                <el-input v-model="form.Tel"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="手机">
                                <el-input v-model="form.Mobile"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="电子邮件">
                                <el-input v-model="form.Email"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="邮编">
                                <el-input v-model="form.Fax"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="排序">
                                <el-input v-model="form.OrderNum"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="头像">
                                <common-upload :groupguid="form.RowGuid" :grouptype="GroupType" controltype="image"></common-upload>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div class="edit_opcontainer">
            <el-button type="primary" v-on:click="handleSubmit">添 加</el-button>
            <el-button v-on:click="close">取 消</el-button>
        </div>
    </div>
</body>
@Scripts.Render("~/Resource/js/fe.foot.js") 
@Scripts.Render("~/Resource/component/tree/index.js")
<script>
    var treeUrl = GetRootPath() + "Frame/OU/Tree"
    var addUrl = GetRootPath() + "Frame/User/OperateAdd";
    var pageData = {
        //data
        form: {
            RowGuid: uuid(),
            DisplayName: '',
            LoginID: '',
            Sex: 1,
            IsEnable: 1,
            Tel: '',
            Mobile: '',
            Email: '',
            Fax: '',
            OUGuid: GetUrlParam('OUGuid'),
            OrderNum: 0
        },
        GroupType: "UserHeadIMG",
        treeData: [],
        //rules
        rules: {
            DisplayName: [{
                required: true,
                message: '请输入姓名',
                trigger: 'blur'
            },],
            LoginID: [{
                required: true,
                message: '请输入登录名',
                trigger: 'blur'
            },],
        },
        //css
        labelWidth: '100px'
    };

    new Vue({
        el: '#app',
        data: pageData,
        mounted: function () {
            bindTree();
        },
        methods: {
            handleSubmit: function () {
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        JsonAjaxPost(addUrl, JSON.stringify(pageData.form), function (data,
                            status) {
                            if (data.code == 0) {
                                OpenSuccess('提示', '添加成功！', function () {
                                    CloseDialog();
                                })
                            } else {
                                OpenFail('提示', '添加失败！')
                            }
                        })
                    }
                });
            },
            close: function () {
                CloseDialog();
            },
            nodeChange: function (val) {
                pageData.form.OUGuid = val;
            }
        }
    })

    function bindTree() {
        var data = {

        }
        JsonAjaxPost(treeUrl, JSON.stringify(data), function (data, status) {
            Vue.set(pageData, "treeData", data.tree);
        })
    }
</script>

</html>